<template>
  <div class="intellectual-property">
    <h2 class="section-title">知识产权</h2>
    
    <div class="property-list">
      <div v-for="(item, index) in patents" :key="index" class="property-card">
        <div class="property-icon">
          <i class="fas fa-certificate"></i>
        </div>
        <div class="property-content">
          <h3>{{ item.title }}</h3>
          <p class="property-info">专利号: {{ item.number }}</p>
          <p class="property-info">申请日期: {{ item.date }}</p>
          <p class="property-desc">{{ item.description }}</p>
        </div>
      </div>
    </div>

    <div class="pagination">
      <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntellectualProperty',
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      patents: [
        {
          title: "智能交通信号控制系统",
          number: "ZL202110XXXXX.X",
          date: "2021-06-15",
          description: "基于车流量实时数据的智能交通信号灯控制系统，能够根据交通流量自动调整信号灯配时，提高道路通行效率。"
        },
        {
          title: "城市交通大数据分析平台",
          number: "ZL202010XXXXX.X",
          date: "2020-09-22",
          description: "利用人工智能技术对城市交通大数据进行分析处理，为城市交通规划和管理提供决策支持。"
        },
        {
          title: "车路协同系统架构",
          number: "ZL201910XXXXX.X",
          date: "2019-11-08",
          description: "基于5G通信技术的车路协同系统架构，实现车辆与道路基础设施的实时信息交互。"
        },
        {
          title: "公交优先信号控制方法",
          number: "ZL201810XXXXX.X",
          date: "2018-07-30",
          description: "一种基于公交车辆位置和客流量的优先信号控制方法，提高公交运行效率和服务质量。"
        },
        {
          title: "交通拥堵预测系统",
          number: "ZL201710XXXXX.X",
          date: "2017-05-16",
          description: "基于历史数据和实时交通信息的拥堵预测系统，能提前15-30分钟预测交通拥堵情况。"
        },
        {
          title: "智能停车引导系统",
          number: "ZL201610XXXXX.X",
          date: "2016-12-03",
          description: "城市停车场智能引导系统，实现停车位实时查询、导航和预约功能。"
        },
        {
          title: "交通事件自动检测算法",
          number: "ZL201510XXXXX.X",
          date: "2015-08-21",
          description: "基于视频图像的交通事件自动检测算法，可快速识别交通事故、违章等异常情况。"
        }
      ]
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.patents.length / this.pageSize);
    },
    paginatedPatents() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.patents.slice(start, end);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

<style scoped>
.intellectual-property {
  padding: 20px 0;
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.property-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.property-card {
  display: flex;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.property-icon {
  flex: 0 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color: #0056b3;
}

.property-content {
  flex: 1;
}

.property-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.property-info {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.property-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-top: 10px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  gap: 15px;
}

.pagination button {
  padding: 8px 16px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pagination span {
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .property-card {
    flex-direction: column;
  }
  
  .property-icon {
    margin-bottom: 15px;
  }
}
</style> 